<template>
	<view class="content">
		<view class="login-image">
			<image src="../../static/images/login/login.png" mode=""></image>
		</view>
		<view class="center-box">
			<view class="phone-box">
				<view class="left-image">
					<image src="../../static/images/login/phone.png" mode=""></image>
				</view>
				<view class="right-box">
					<u-input class="input" v-model="form.phone" :clearable="false" type="text" :border="false" placeholder="请输入手机号"
					 placeholderStyle="color:rgba(201,201,201,1);" />
				</view>
			</view>
			<view class="code-box">
				<view class="left-code">
					<view class="left-image-code">
						<image src="../../static/images/login/code.png" mode=""></image>
					</view>
					<view class="left-input">
						<u-input class="input" v-model="form.code" :clearable="false" type="text" :border="false" placeholder="请输入验证码"
						 placeholderStyle="color:rgba(201,201,201,1);" />
					</view>
				</view>
				<view class="right-code">
					获取验证码
				</view>
			</view>
			<view class="profie-box">
				<view class="left-profie-img">
					<view class="un-agreen" v-if="!flang">

					</view>
					<image v-else src="../../static/images/login/agreen.png" mode=""></image>
				</view>
				<view class="right-profie">
					登录即代表您已同意<text @click="goUserPro">《用户登录协议》《用户使用操作登录协议》</text>
				</view>
			</view>
		</view>
		<view class="foot-btn" @click="goLogin()">
			登录
		</view>
		<view>
			<u-popup ref="protocol" v-model="isShow" mode="center" border-radius="12" width="600rpx">
				<view class="poup-content">
					<view class="title">
						新用户协议授权
					</view>
					<view class="annotation">
						根据平台政策调整，已更新用户协议，如需继续使用服务，需获得您的授权
					</view>
					<view class="text">
						用户协议内容Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida
						dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque
						penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra
						vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.Lorem ipsum dolor sit amet, consectetur
						adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo
						commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
						ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc
						eget.
					</view>
					<view class="poup-btn-box">
						<view class="cancel-btn" @click="cancel">
							取消
						</view>
						<view class="agreen-btn" @click="agreenBtn">
							阅读并同意授权
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone: '',
					code: ''
				},
				flang: false,
				isShow: true
			}
		},
		methods: {
			agreenBtn() {
				this.isShow = false;
				this.$refs.protocol.close()
				this.flang = true;
			},
			cancel() {
				this.isShow = false;
				this.$refs.protocol.close()
			},
			goLogin() {
				this.$u.route('pages/attestation/select-identity');
			},
			goUserPro() {
				this.$u.route({
					url: 'pages/protocol/user-protocol',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #FFFFFF;
		width: 100%;
		padding: 209rpx 40rpx 0;
		box-sizing: border-box;
		min-height: 100vh;

		.login-image {
			width: 127rpx;
			height: 60rpx;
			margin: 0 auto 140rpx;
			font-size: 0;

			image {
				width: 127rpx;
				height: 60rpx;
			}
		}

		.center-box {
			padding-left: 9rpx;

			.phone-box {
				display: flex;

				.left-image {
					width: 30rpx;
					height: 47rpx;
					font-size: 0;
					margin-top: 14rpx;

					image {
						width: 30rpx;
						height: 47rpx;
					}
				}

				.right-box {
					width: 100%;
					margin-left: 14rpx;
					margin-top: 4rpx;
					padding-left: 7rpx;
					border-bottom: 1rpx solid rgba(223, 223, 223, 1);

					input {
						line-height: 43rpx;
						font-size: 32rpx;
						font-weight: 400;
					}
				}
			}

			.code-box {
				margin-top: 74rpx;
				display: flex;

				.left-code {
					width: 100%;
					flex: 1;
					display: flex;
					margin-right: 44rpx;

					.left-image-code {
						margin-top: 19rpx;

						image {
							width: 35rpx;
							height: 40rpx;
						}
					}

					.left-input {
						flex: 1;
						margin-left: 12rpx;
						border-bottom: 1rpx solid rgba(223, 223, 223, 1);
					}
				}

				.right-code {
					width: 180rpx;
					height: 80rpx;
					font-size: 24rpx;
					font-weight: 600;
					line-height: 80rpx;
					text-align: center;
					color: rgba(211, 176, 104, 1);
					opacity: 1;
					border: 1px solid rgba(211, 176, 104, 1);
				}
			}

			.profie-box {
				margin-top: 30rpx;
				padding-left: 47rpx;
				padding-right: 68rpx;
				display: flex;

				.left-profie-img {
					width: 30rpx;
					height: 30rpx;
					font-size: 0;
					margin-top: 6rpx;
					margin-right: 16rpx;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					.un-agreen {
						width: 30rpx;
						height: 30rpx;
						border: 1rpx solid #D3B068;
						border-radius: 50%;
					}
				}

				.right-profie {
					font-size: 22rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #000000;
					opacity: 1;

					text {
						color: #D3B068;
					}
				}
			}
		}

		.foot-btn {
			margin-top: 70rpx;
			width: 100%;
			height: 90rpx;
			background: linear-gradient(180deg, rgba(211, 176, 105, 1) 0%, rgba(228, 205, 112, 1) 100%);
			opacity: 1;
			border-radius: 8rpx;
			font-size: 30rpx;
			font-weight: 600;
			line-height: 90rpx;
			color: rgba(255, 255, 255, 1);
			opacity: 1;
			text-align: center;
		}

		.poup-content {
			padding: 50rpx;
			box-sizing: border-box;

			.title {
				width: 100%;
				text-align: center;
			}

			.annotation {
				margin-top: 20rpx;
				margin-bottom: 30rpx;
				font-size: 22rpx;
				font-weight: 600;
				line-height: 36rpx;
				color: rgba(211, 176, 104, 1);
				opacity: 1;
			}

			.text {
				font-size: 22rpx;
				font-weight: 600;
				line-height: 30rpx;
				color: rgba(0, 0, 0, 1);
				opacity: 1;
			}

			.poup-btn-box {
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;

				.cancel-btn {
					width: 235rpx;
					height: 90rpx;
					background: rgba(255, 255, 255, 1);
					border: 1rpx solid rgba(153, 153, 153, 1);
					opacity: 1;
					border-radius: 8rpx;
					font-size: 30rpx;
					font-weight: 400;
					line-height: 90rpx;
					color: rgba(153, 153, 153, 1);
					opacity: 1;
					text-align: center;
				}

				.agreen-btn {
					width: 235rpx;
					height: 90rpx;
					background: linear-gradient(180deg, rgba(211, 176, 105, 1) 0%, rgba(228, 205, 112, 1) 100%);
					opacity: 1;
					border-radius: 8rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: 400;
					line-height: 90rpx;
					color: rgba(255, 255, 255, 1);
					opacity: 1;
				}
			}
		}
	}
</style>
